<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: shuan
  Date: 2016/12/6
  Time: 18:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="所有发生idle原因的机床趋势"/>
</jsp:include>

<jsp:include page="../../include/admin_header.jsp"/>

<jsp:include page="../../include/admin_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display:inline-block">所有发生idle原因的机床趋势折线图</h4>
    </section>
    <section class="content" style="min-height:0px">
        <div style="width:100%;border:1px solid #cdd9e1;background-color:#fff">
            <div style="width: 100%;border:1px solid #cdd9e1;background-color: #fff;padding-bottom: 20px;">
                <div class="row sie-chart-title">
                    <div class="sie-title-des">发生某一IDLE原因机床</div>
                    <div class="sie-chart-btn">
                        <div style="display: inline-block">
                            <a id="export" href="javascript:;" class="hollow-button-green hidden" style="line-height: 2.5;" onclick="exportExcel()"><spring:message code="label.export.data"/></a>
                        </div>
                    </div>
                </div>
            <%--折线图选项条--%>
            <div style="padding-right: 15px;padding-left: 50px;display: -webkit-box;color: white;font-size: 12px;margin-top: 15px">
                <div style="display: inline-block;color:#000;font-size:14px"><spring:message code="label.choice.tenant"/>:</div>
                <div style="display: inline-block;display:-ms-inline-flexbox;margin-bottom: 5px;">
                    <select id="select_tenant" class="form-control" style="max-width:200px;min-width:100px;min-height: 20px;max-height: 30px;padding: 0px 2px;border-radius:5px;"
                            onchange="tenantChange(this,'srdd')">

                    </select>
                </div>
                <div style="display:inline-block;color: #000;font-size: 14px;"><spring:message code="label.tenant.idleReason"/>：</div>
                <div style="display: inline-block;display:-ms-inline-flexbox;margin-bottom: 5px;">
                    <select id="select_idleReason" class="form-control" style="max-width:200px;min-width:100px;min-height: 20px;max-height: 30px;padding: 0px 2px;border-radius: 5px;"
                            onchange="idleReasonChange(this,'srdd')">

                    </select>
                </div>
            </div>
            <div id="chartContainer" class="hidden" style="padding:10px 15px 10px 50px;display: -webkit-box;color: white;font-size: 12px;">
                <div style="width: 100%;line-height: 2.4;border-radius:10px;display: -webkit-box;">
                    <a href="javascript:;" class="sie-date-btn" id="srdd_week" onclick="changeDate(this)">
                        <spring:message code="label.one.week"/>
                    </a>
                    <a href="javascript:;" class="sie-date-btn" id="srdd_month" onclick="changeDate(this)">
                        <spring:message code="label.one.month"/>
                    </a>
                    <a href="javascript:;" class="sie-date-btn" id="srdd_year" onclick="changeDate(this)">
                        <spring:message code="label.one.year"/>
                    </a>
                    <div style="display:inline-block;display:-ms-inline-flexbox;">
                        <div class="sie-calendar-parent">
                            <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker" placeholder='<spring:message code="label.start.time"/>' id="srdd_start_time">
                            <img src="/images/calendar.png" class="sie-calendar-img">
                        </div>
                        <div class="sie-calendar-parent">
                            <input type="text" readonly="readonly" class="form-control sie-calendar-input datepicker" placeholder='<spring:message code="label.end.time"/>' id="srdd_end_time">
                            <img src="/images/calendar.png" class="sie-calendar-img">
                        </div>
                        <a href="javascript:;"
                           style="width: 50px;height: 30px;line-height: 34px;margin-left: 15px;border-radius: 5px;color:#fff;background-color: #41aaaa;display: inline-block;text-align: center;"
                           id="srdd_date_submit" onclick="sameReasonDevicesLineChart(this)">
                            <span><spring:message code="label.admin.confirm"/></span>
                        </a>
                    </div>
                </div>
            </div>
            <div id="sameReasonDeviceLineChat" style="padding: 20px 20px 0 20px;">

            </div>
            <div id="rangeSelector" style="padding: 0 20px 20px 20px;">

            </div>
        </div>
        </div>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script src="/../js/dx.all.js"></script>
<script src="/../js/charts.js"></script>
<script>
    var exportData = {};
    $(document).ready(function () {
        $("#srdd_start_time").datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate:new Date("2016-11-01"),
            endDate:new Date(dateAddSubtract(new Date(),-1)),
            todayHighlight:true
        }).on('changeDate',function(ev){
            $("#srdd_end_time").datepicker('setStartDate',ev.date)
        });

        $("#srdd_end_time").datepicker({
            language: "zh-CN",
            autoclose: true,
            format: "yyyy-mm-dd",
            startDate:new Date("2016-11-01"),
            endDate:new Date(dateAddSubtract(new Date(),-1)),
            todayHighlight:true
        }).on('changeDate',function(ev){
            $("#srdd_start_time").datepicker('setEndDate',ev.date)
        });
        bindDateInputClickEvent();
        //获取tenantList
        $.ajax({
            url: "/admin/api/v1/tenant/list",
            type: 'get',
            success: function (data) {
                if (data.data == null) {
                    return;
                }
                $('#select_tenant').append($("<option></option>").attr("data-option", "first").attr("selected","selected").text('<spring:message code="label.choice"/>'));
                $.each(data.data, function (index, result) {
                    var $option = $("<option></option>").attr("data-tenantid", result.tenantId).attr("data-tenantkey", result.tenantKey).text(result.tenantName);
                    $('#select_tenant').append($option);
                });
            },
            error: function (data) {
                console.log(data);
            }
        });
    });

    function tenantChange(dom, prefix) {
        $("#select_reason").empty();
        $("#select_idleReason").empty();
        $("#chartContainer").addClass("hidden");
        createSameReasonDevicesLineChart([], []);
        if ($("#select_tenant").find("option:selected").data("option") == "first") {
            $("#export").addClass("hidden");
            return;
        }
        getIdleReasonList();
    }

    function getIdleReasonList() {
        $.ajax({
            url: "/admin/api/v1/getIdleReasonByTenant",
            type: "get",
            data:{
                tenant:$("#select_tenant").find("option:selected").data("tenantid")
            },
            success: function (data) {
                if (data.data.length == 0) {
                    $("#select_idleReason").append($("<option></option>").attr("data-option","first").text('<spring:message code="label.choice"/>'));
                    return;
                }

                $("#select_idleReason").append($("<option></option>").attr("data-option","first").attr("selected", "selected").text('<spring:message code="label.choice"/>'));
                $.each(data.data, function (index, result) {
                    var $option = $("<option></option>").attr("data-id", result.idleId).text(result.idleName);
                    $("#select_idleReason").append($option);
                });
            },
            error: function (data) {
                console.log(data);
            }
        })
    }

    function idleReasonChange(dom,prefix){
        $(".btn-selector").removeClass("btn-selector");
        $("#srdd_week").addClass("btn-selector");

        $("#srdd_start_time").val(dateFormat(dateAddSubtract(new Date(),-7)));
        $("#srdd_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
        $("#srdd_start_time").datepicker('update');
        $("#srdd_end_time").datepicker('update');
        createSameReasonDevicesLineChart([], []);

        if($("#select_idleReason").find("option:selected").data("option") == 'first'){
            $("#chartContainer").addClass("hidden");
            $("#export").addClass("hidden");
            return;
        }
        $("#chartContainer").removeClass("hidden");
        sameReasonDevicesLineChart(this);
    }

    function changeDate(dom){
        $(".btn-selector").removeClass("btn-selector");
        $(dom).addClass("btn-selector");
        $("#export").addClass("hidden");
        if(dom.id == "srdd_week"){
            $("#srdd_start_time").val(dateFormat(dateAddSubtract(new Date(),-7)));
            $("#srdd_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
            $("#srdd_start_time").datepicker('update');
            $("#srdd_end_time").datepicker('update');
        }else if(dom.id == "srdd_month"){
            $("#srdd_start_time").val(dateFormat(dateAddSubtract(new Date(),-30)));
            $("#srdd_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
            $("#srdd_start_time").datepicker('update');
            $("#srdd_end_time").datepicker('update');
        }else if(dom.id == "srdd_year"){
            $("#srdd_start_time").val(dateFormat(dateAddSubtract(new Date(),-365)));
            $("#srdd_end_time").val(dateFormat(dateAddSubtract(new Date(),-1)));
            $("#srdd_start_time").datepicker('update');
            $("#srdd_end_time").datepicker('update');
        }
        sameReasonDevicesLineChart(dom);
    }

    //获取数据：同原因全部机床折线图(折线)
    function sameReasonDevicesLineChart(dom) {
        if($("#srdd_start_time").val() == "" || $("#srdd_end_time").val()==""){
            swal({
                title:"<spring:message code="label.warning"/>",
                text:'<spring:message code="label.choice.date"/>',
                type:"warning",
                showCancelButton:false,
                showConfirmButton:true,
                confirmButtonText: '<spring:message code="label.admin.confirm"/>',
                animation:"slide-from-top"
            },function(){
                createSameDeviceSameReasonLineChart([], []);
                $("#export").addClass("hidden");
                return;
            });
        }
        if(dom.id == "srdd_date_submit"){
            $(".btn-selector").removeClass("btn-selector");
        }

        var data = {};

        //获取开始时间和结束时间
        data["startTime"] = $("#srdd_start_time").val();
        data["endTime"] = $("#srdd_end_time").val();

        var $selected = $("#select_idleReason").find("option:selected");
        data["tenant"] = $("#select_tenant").find("option:selected").data("tenantid");
        data["reason"] = $selected.data("id");
        data["reasonName"] = $selected.text();
        exportData = data;
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/admin/api/v1/getSameReasonDevices",
                type: "get",
                data: data,
                success: function (data) {
                    if (data.result != "SUCCESS") {
                        createSameReasonDevicesLineChart([], []);
                        $("#export").addClass("hidden");
                        return;
                    }
                    if (Object.keys(data.data).length == 0) {
                        createSameReasonDevicesLineChart([], []);
                        $("#export").addClass("hidden");
                        return;
                    }

                    var idleList = data.data.idleList;
                    var devices = data.data.series;
                    var series = [];
                    for (var i = 0; i < devices.length; i++) {
                        var serie = {};
                        for (var j = 0; j < idleList.length; j++) {
                            if (!(devices[i] in idleList[j])) {
                                idleList[j][devices[i]] = 0;
                            }
                        }
                        serie["valueField"] = devices[i];
                        serie["name"] = devices[i];
                        series.push(serie);
                    }
                    if (series.length==0){
                        $("#export").addClass("hidden");
                    }else {
                        $("#export").removeClass("hidden");
                    }
                    createSameReasonDevicesLineChart(idleList, series);
                    dtd.resolve();
                }
            });
        });
    }

    function exportExcel() {
        BYLoadingToast('<spring:message code="label.loading"/>', function (dtd) {
            $.ajax({
                url: "/admin/api/v1/sameReasonDevicesExport",
                type: "get",
                data:exportData,
                success: function (reasult) {
                    if (reasult.data == null || reasult.data == "" || reasult.data == undefined) {
                        dtd.resolve();
                        alert("daochushibai")
                    } else {
                        dtd.resolve();
                        window.location.href = "/api/v1/excel/get?name=" + reasult.data;
                    }
                },
                error: function () {
                    dtd.resolve();
                }
            })
        })
    }
</script>